<template>
	<view class="content">
		<!-- logo -->
		<view class="header-container">
			<view class="logo-menu-container">
				<view class="logo-container">
					<view class="logo-img">
						<image :src="logoname.logoSrc" mode="widthFix" class="pic"></image>
					</view>
					<view class="logo-text">
						{{logoname.studioName}}
					</view>
				</view>
				<view class="menu"></view>
			</view>
		</view>
		<!-- 轮播 -->
		<uni-swiper-dot :current="current" :mode="mode" class="swiper">
			<swiper indicator-color="rgba(255, 255, 255, 1)" indicator-active-color="rgba(0, 128, 255, 1)"
				:indicator-dots="true" :autoplay="true" :interval="4000" :duration="300" @change="change" class="swiper-item">
				<swiper-item v-for="(i,index) in banner" :key="index" class="swiper-item">
					<view >
						<image :src="i.picSrc" mode="widthFix" class="pic lunbo"></image>
						<text class="main-text">{{i.mainTitle}}</text>
						<text class="secondary-text">{{i.secondaryText}}</text>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<!-- <van-tab @click="onTab" :tabs="tabsArr" /> -->
		<view class="tabs">
			<view v-for="(i,index) in tabsArr" :key="index" :class="index==currentC?'active':''" @click="onTab(index)">
				{{i}}</view>
		</view>
		<view class="item-container">
			<view class="xiangmu" v-if="currentC==0">
				
				<view class="card">
					<view class="title">
						<text class="t1">项目研究目标</text>
						<text class="t2">Project Research Objectives</text>
					</view>
					<!-- <image src="../../static/pic2.png" mode="widthFix" class="pic"></image> -->
					<text class="txt1" v-html="xiangmu.conten">
						



					</text>
				</view>
			</view>
			<view class="renwu" v-if="currentC==1">
				
				<view class="card" v-for="(i,index) in member" :key="index">
					<view class="head">
						<view class="head-pic">
							<image :src="i.picSrc" mode="widthFix" class="pic"></image>
						</view>
						<view class="name-box">
							<text>{{i.name}}</text>
							<text>{{i.zhize}}</text>
						</view>
					</view>
					<text class="jieshao-txt1">
						{{i.rongyu}}
					</text>
					<text class="jieshao-txt2">
						专长：{{i.zhuanchang}}
					</text>
				</view>
				
				
			</view>
			<view class="shipin" v-if="currentC==2">
				<view class="card" v-for="(i,index) in video" :key="index">
					<video :src="i.videoSrc" controls class="videooo"></video>
				</view>
			</view>
			<view class="chanpin" v-if="currentC==3">
				<view class="card">
					<view class="title">
						<text class="t1">产品简介</text>
						<text class="t2">Product Introduction</text>
					</view>
					<!-- <image src="../../static/pic1.png" mode="widthFix" class="pic"></image> -->
					<text class="txt1" v-html="chanpin.conten"></text>
				</view>
			</view>
		</view>
		
		<!-- footer -->
		<view class="header-container foot">
			<view class="logo-menu-container foot-flex">
				<view class="logo-container">
					<view class="logo-img">
						<image :src="logoname.logoSrc" mode="widthFix" class="pic"></image>
					</view>
					<view class="logo-text">
						{{logoname.studioName}}
					</view>
				</view>
				<text class="foot-tel">联系电话：{{logoname.studioTel}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import vanTab from "../../components/van-tab/van-tab";
	export default {
		components: {
			vanTab
		},
		data() {
			return {
				xiangmu:[],
				chanpin:[],
				video:[],
				banner:[],
				member:[],
				logoname:{
					logoSrc: "",
					studioName: "",
					studioTel:''
				},
				current: 0,
				currentC: 0,
				mode: 'round',
				swiperArr: [{
						mainText: 'BANNER TEXT',
						secondaryText: 'Unmanned Drone',
						img: '../../static/banner.png'
					},
					{
						mainText: 'BANNER TEXT',
						secondaryText: 'Unmanned Drone',
						img: '../../static/banner.png'
					},
					{
						mainText: 'BANNER TEXT',
						secondaryText: 'Unmanned Drone',
						img: '../../static/banner.png'
					}
				],
				tabsArr: ["项目介绍", "人物介绍", "视频介绍", "产品介绍"]
			}
		},
		onLoad() {
			uniCloud.callFunction({
				name:'logoname',
				data:{sign:1}//标示：查询用，必填
			}).then((res)=>{
				console.log('res',res)
				if (res.result.data.length>0) {
					this.logoname = res.result.data[0]
				} else{
					uni.showToast({
						title:'名称和logo查询错误，请重试',
						mask:true
					})
				}
			})
			
			uniCloud.callFunction({
				name:'banner',
				data:{sign:1}//标示：查询用，必填
			}).then((res)=>{
				console.log('res',res)
				if (res.result.data.length>0) {
					this.banner = res.result.data
				} else{
					uni.showToast({
						title:'轮播图查询错误，请重试',
						mask:true
					})
				}
			})
			
			uniCloud.callFunction({
				name:'member',
				data:{sign:1}//标示：查询用，必填
			}).then((res)=>{
				console.log('res',res)
				if (res.result.data.length>0) {
					this.member = res.result.data
				} else{
					uni.showToast({
						title:'轮播图查询错误，请重试',
						mask:true
					})
				}
			})
			
			uniCloud.callFunction({
				name:'video',
				data:{sign:1}//标示：查询用，必填
			}).then((res)=>{
				console.log('res',res)
				if (res.result.data.length>0) {
					this.video = res.result.data
				} else{
					uni.showToast({
						title:'视频查询错误，请重试',
						mask:true
					})
				}
			})
			
			uniCloud.callFunction({
				name:'chanpin',
				data:{sign:1}//标示：查询用，必填
			}).then((res)=>{
				console.log('res',res)
				if (res.result.data.length>0) {
					this.chanpin = res.result.data[0]
				} else{
					uni.showToast({
						title:'产品介绍查询错误，请重试',
						mask:true
					})
				}
			})
			
			uniCloud.callFunction({
				name:'xiangmu',
				data:{sign:1}//标示：查询用，必填
			}).then((res)=>{
				console.log('res',res)
				if (res.result.data.length>0) {
					this.xiangmu = res.result.data[0]
				} else{
					uni.showToast({
						title:'项目介绍查询错误，请重试',
						mask:true
					})
				}
			})
			
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			onTab(index) {
				console.log(index)
				this.currentC = index
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #ebf0f5;
	}

	.header-container {
		width: 100%;
		height: 170rpx;
		background: #FFFFFF;
		border-radius: 0px 0px 16rpx 16rpx;

		.logo-menu-container {
			width: 690rpx;
			height: 60rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.logo-container {
			display: flex;
			flex-direction: row;
			height: 60rpx;
			align-items: center;

			.logo-img {
				background: url(../../static/logo.png) no-repeat center center;
				background-size: 100%;
				width: 67rpx;
				height: 60rpx;
			}

			.logo-text {
				font-size: 32rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				margin-left: 16rpx;
			}
		}

		.menu {
			width: 44rpx;
			height: 38rpx;
			background: url(../../static/icon_menu.png) no-repeat center center;
			background-size: 100%;
		}
	}

	.swiper {
		z-index: 99;
		height: 360rpx !important;
		width: 690rpx;
		// border: 1px solid #007AFF;
		margin-top: -58rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 42rpx;
	}

	.swiper-item {
		width: 100%;
		height: 360rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;

	}

	.main-text {
		position: absolute;
		left: 60rpx;
		top: 97rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}

	.secondary-text {
		position: absolute;
		width: 154rpx;
		left: 60rpx;
		top: 162rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		color: #333333;
	}

	.item-container {
		width: 690rpx;
		// border: 1px solid #007AFF;
		margin-top: 24rpx;
	}

	.tabs {
		width: 650rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		border-bottom: 1px solid #DCE1E6;
		padding: 0 0rpx 30rpx 0rpx;

		view {
			height: 32rpx;
			line-height: 32rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			transition: all 0.2s linear;
			// flex: 1;
			// text-align: center;
		}

		.active {
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #292929;
		}
	}

	.card {
		background: #FFFFFF;
		box-shadow: 0px 7rpx 20rpx 0px rgba(220, 225, 230, 0.6);
		border-radius: 20rpx;
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 37rpx;

		.title {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-bottom: 30rpx;

			.t1 {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0080FF;
				line-height: 36rpx;
			}

			.t2 {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #A7A7A7;
				line-height: 36rpx;
			}
		}

		.txt1 {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3D3D3D;
			line-height: 38rpx;
			// margin-top: 30rpx;
			letter-spacing: 2px;
			display: flex;
			flex-direction: column;

			text {
				display: block;
				margin-bottom: 10rpx;
			}

			.txt-title {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(61, 61, 61, 1);
				line-height: 38rpx;
				margin-bottom: 10rpx;
			}
		}

		.head {
			display: flex;
			flex-direction: row;
			margin-bottom: 30rpx;
			align-items: center;

			.head-pic {
				width: 140rpx;
				height: 140rpx;
				background: #E3E3E3;
				border-radius: 16rpx;
				overflow: hidden;
				margin-right: 30rpx;
			}

			.name-box {
				display: flex;
				flex-direction: column;

				text:nth-of-type(1) {
					font-size: 34rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #292929;
					line-height: 38rpx;
				}

				text:nth-of-type(2) {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #0080FF;
					line-height: 38rpx;
					margin-top: 20rpx;
				}
			}

			
		}
		.jieshao-txt1 {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3D3D3D;
			line-height: 38rpx;
			margin-bottom: 20rpx;
		}
		
		.jieshao-txt2 {
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			line-height: 38rpx;
		}
		.videooo{
			width: 100%;
			max-height: 400rpx;
		}
	}
	
	.lunbo{
		width: 690rpx;
		height: 360rpx;
	}
	.foot{
		width: 100%;
		height: 140rpx;
		box-shadow: 0 -10rpx 20px rgba(220, 225, 230, 0.7);
		position: fixed;
		bottom: 0;
		left: 0;
		background: #fff;
		z-index: 999999;
		display: flex;
		align-items: center;
		.foot-flex{
			margin: 0 auto;
		}
		.foot-tel{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
</style>
